@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background: #f9f9f9;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
}

.ql-bold,
.ql-italic,
.ql-underline,
.ql-strike,
.ql-blockquote,
.ql-code-block,
.ql-header,
.ql-list,
.ql-script,
.ql-indent,
.ql-direction,
.ql-size,
.ql-color,
.ql-background,
.ql-font,
.ql-align,
.ql-image,
.ql-link,
.ql-clean {
  position: relative;
}

.ql-bold:hover::after,
.ql-italic:hover::after,
.ql-underline:hover::after,
.ql-strike:hover::after,
.ql-blockquote:hover::after,
.ql-code-block:hover::after,
.ql-header:hover::after,
.ql-list:hover::after,
.ql-script:hover::after,
.ql-indent:hover::after,
.ql-direction:hover::after,
.ql-size:hover::after,
.ql-color:hover::after,
.ql-background:hover::after,
.ql-font:hover::after,
.ql-align:hover::after,
.ql-image:hover::after,
.ql-link:hover::after,
.ql-clean:hover::after {
  opacity: 1;
  /* 鼠标移入时显示 */
}

.ql-clean::after {
  content: "除字体样式";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-link::after {
  content: "链接";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-image::after {
  content: "上传图片";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-align::after {
  content: "对齐方式";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-font::after {
  content: "字体格式";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-background::after {
  content: "背景颜色";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-color::after {
  content: "大小颜色";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-size::after {
  content: "字体大小";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-direction::after {
  content: "文本方向";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-indent::after {
  content: "缩进";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-script::after {
  content: "上下标";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-list::after {
  content: "列表";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-header::after {
  content: "标题";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-code-block::after {
  content: "代码块";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-blockquote::after {
  content: "引用";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-strike::after {
  content: "删除线";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-underline::after {
  content: "下划线";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-italic::after {
  content: "斜体";
  /* 悬浮文字内容 */
  opacity: 0;
  /* 默认隐藏 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}

.ql-bold::after {
  content: "加粗";
  /* 悬浮文字内容 */
  position: absolute;
  top: -30px;
  /* 悬浮文字的位置 */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  /* 默认隐藏 */
  transition: opacity 0.3s ease;
  /* 添加过渡效果 */
  pointer-events: none;
  /* 防止悬浮文字干扰按钮点击 */
}